<template>
	<view class="content">
		<view class="tabber_box flexs1">
			<view  class="tabber_item" :class="typeIndex===index?'chooseactive':''  " v-for="(item,index) in typeList" :key="index" @click="typeTop(item)">
				<view>{{item.name}}</view>
				<view class="title_line" :style="typeIndex === index?'':'display:none'"></view>
			</view>
		</view>
		<view :class="flagtag ==true ?'none_msg':'list_box'">
			<view class="list_item" v-for="(item,index) in toplistcat" :key="index">
				<view class="list_left">
					<image :src="picture.getImgUrl(item.image)" mode=""></image>
				</view>
				<view class="list_right">
					<view class="list_title">{{item.name}}</view>
					<view class="list_time">{{item.createtime}}</view>
					<view class="list_data_box">
						<view class="list_read_num">
							<image src="../../static/img/look.png" mode=""></image>{{item.read_num}}
						</view>
						<view class="list_com_num">
							<image src="../../static/img/info.png" mode=""></image>{{item.comment_num}}
						</view>
					</view>
				</view>
			</view>
			<image :style="flagtag ==true?'display:block':'display:none'" src="../../static/img/zpzx_img_k@2x.ea242e98.png" mode=""></image>
		</view>
		
	</view>
</template>

<script>
	export default {
		props:['typeList','toplistcat','typeIndex','flagtag'],
		data(){
			return{
			
			}
		},
		methods:{
			typeTop(val){
				this.$emit("pChangeType",val)
			}
		}
	}
</script>


<style scoped lang="scss">
.content{
	.tabber_box{
		width: 100%;
		    height: 80rpx;
		    margin: auto;
		    background-color: #fff;
		    overflow-x: scroll;
		    padding-left: 20rpx;
		    position: fixed;
		    top: 84rpx;
		    z-index: 10;
		    margin-right: 30rpx;
	}
	.chooseactive{
			width: auto;
		    font-size: 32rpx;
		    font-family: PingFang SC;
		    font-weight: 700 !important;
		    color: #333 !important;
		    margin: 0 30rpx;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			flex-shrink: 0;
			
	}
	.tabber_item{
		    width: auto;
		        font-size: 30rpx;
		        font-family: PingFang SC;
		        font-weight: 500;
		        color: #666;
		        display: flex;
		        margin: 0 30rpx;
		        justify-content: center;
		        align-items: center;
		        flex-direction: column;
		        flex-shrink: 0;
		
	}
	.title_line{
			width: 60rpx;
		    height: 4rpx;
		    background: #ffdd47;
		    border-radius: 2rpx;
		    margin-top: 4rpx;
	}
	.none_msg{
		width: 100%;
		    height: auto;
		    display: flex;
		    justify-content: center;
		    align-items: center;
		    flex-direction: column;
		    margin-top: 300rpx;
		
		image{
			width: 354rpx;
			    height: 322rpx;
		}
	}
	.list_box{
		    width: 100%;
		    height: auto;
		    background-color: #fff;
		    padding: 0rpx 30rpx;
		    margin-top: 100rpx;
			.list_item{
				height: auto;
				    width: 100%;
				    display: flex;
				    justify-content: flex-start;
				    align-items: flex-start;
				    padding-top: 30rpx;
				 image{
					width: 196rpx;
					    height: 130rpx;				    margin-right: 20rpx;
					    background-color: #f5f5f5;
				}
				.list_right{
					height: 100%;
					    height: 200rpx;
					    width: 85%;
					    border-bottom: 1rpx solid #f5f5f5;
					.list_title{
						width: 100%;
						    padding-right: 10rpx;
						    font-size: 28rpx;
						    font-family: PingFang SC;
						    font-weight: 700;
						    height: 70rpx;
						    line-height: 34rpx;
						    color: #333;
						    overflow: hidden;
						    text-overflow: ellipsis;
						    display: -webkit-box;
						    -webkit-box-orient: vertical;
						    -webkit-line-clamp: 2;
					}
					.list_time{
						font-size: 24rpx;
						    font-family: PingFang SC;
						    font-weight: 500;
						    color: #999;
						    margin-top: 10rpx;
					}
					.list_data_box{
						width: 100%;
						    display: flex;
						    justify-content: space-between;
						    align-items: center;
						    margin-top: 10rpx;
						    font-size: 24rpx;
						    font-family: PingFang SC;
						    font-weight: 500;
						    color: #333;
						    padding-right: 220rpx;
							.list_read_num{
								display: flex;
								    align-items: center;
									image{
										width: 26rpx;
										    height: 26rpx;
										    margin-right: 10rpx;
									}
							}
							.list_com_num{
								display: flex;
								    align-items: center;
									image{
										width: 28rpx;
										    height: 26rpx;
										    margin-right: 10rpx;
									}
							}
					}
				}
			}
		}
}
</style>